<template>
	<div class="view_box">
		<div class="type">
			<div class="left">
				<el-button 
					color="#00B2FF" 
					style="color: #fff;"
					@click="showCoursewareDialog"
				>
					输入作答码
				</el-button>
			</div>
			<div class="right">
				<el-select
					v-model="state.teacherName"
					class="m-2"
					placeholder="请选择教师名字"
					@change="updateCoursewareList"
					style="width: 130px;margin-right: 20px"
				>
					<el-option
						v-for="item in state.classList"
						:key="item.id"
						:label="item.name"
						:value="item.creatorId"
					/>
				</el-select>
				<el-select
					v-model="state.coursewareCreateTime"
					class="m-2"
					placeholder="请选择时间"
					@change="updateCoursewareList"
					style="width: 130px;margin-right: 20px"
				>
					<el-option
						v-for="item in state.option"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
        <el-select
            v-model="state.currentCoursewareType"
            class="m-2"
            placeholder="全部类型"
            @change="updateCoursewareList"
            style="width: 130px;margin-right: 20px"
        >
          <el-option
              v-for="item in state.coursewareType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
			</div>
		</div>
		<div class="bottom" v-infinite-scroll="loadMore" :infinite-scroll-disabled="true"  style="overflow: auto">
      <ul 
        class="infinite-list" 
      >
        <li 
          v-for="(coursewareItem, i) in state.coursewareList" 
          :key="i" 
          class="infinite-list-item"
        >
          <div 
            v-for="(listItem, index) in coursewareItem"
            :key="i + '' + index"
			      class="item-wrap"
          > 
            <div class="left-box">
              <div class="title">
                <el-tag color="lightGrey" style="color:#000" v-if="listItem.typeId === -1">未推送</el-tag>
                <el-tag v-if="listItem.typeId === 1 || listItem.typeId === 4" type="primary" color="#00B2FF" style="color:#fff">练</el-tag>
                <el-tag v-if="listItem.typeId === 2" color="#22DE9A" style="color:#fff">测</el-tag>
                <el-tag v-if="listItem.typeId === 3 || listItem.typeId === 5" color="red" style="color:#fff">考</el-tag>
                {{listItem.title}}
              </div>
              <div class="time">
                {{listItem.createTime}}
              </div>
            </div>
            <div :class="listItem.status === '已完成' || listItem.status === '已提交' ? 'right-box' : 'right-box finished'">
              {{ listItem.status }}
            </div>
          </div>
        </li>
      </ul>
			<!-- <el-row :gutter="20" v-for="(item,index) in state.coursewareList">
				<el-col :span="6" v-for="(item1,index1) in item">
					<el-card shadow="hover" :class="item1.paper_type === 2 ? 'stageQuizColor': 'normal'"  @click="toCoursewareDetail(item1.id)">
						<div class="coursewareContent" >
							<el-tag effect="dark" v-if="item1.paper_type === 2" type="success" size="small" style="height:20px">阶段测验</el-tag>
							<el-tag effect="dark" v-else type="primary" size="small" style="height:20px">融课件</el-tag>
							<div class="contentTop">
								{{item1.title}}
							</div>
							<div class="contentBottom">
								<div style="margin-bottom: 5px" >
									{{item1.status}}
								</div>
								<div >
									{{item1.createTime}}
								</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row> -->
		</div>
		<el-dialog
			v-model="state.dialogVisible"
			title="请输入作答码"
		>
			<el-input 
				v-model="state.coursewareCode" 
				placeholder="请输入作答码" 
				autocomplete="off" 
				style="width: 50%; margin: 0 auto;display: flex; align-items: center; justify-content: center;"
			/>
			<template #footer>
			<span class="dialog-footer">
				<el-button 
					@click="state.dialogVisible = false"
				>
					取消
				</el-button>
				<el-button
					color="#00B2FF" 
					style="color: #fff;" 
					@click="confirmCoursewareDialog"
				>
					确定
				</el-button>
			</span>
			</template>
		</el-dialog>
	</div>
</template>


<script setup lang="ts">
import {reactive} from "vue-demi";
import api from "@/api";
import {onMounted} from "vue";
import {useRoute} from "vue-router";
import Utils from "utils";
import router1 from "@/router";
import {useDataStore} from "@/stores/useDataStore";
import bus from "@/utils/bus";
const router = useRoute();
import { ElMessage } from 'element-plus'
onMounted(async ()=>{
  bus.on("toCoursewareDetail", (data) => {
    toCoursewareDetail(data as number);
  })
  state.classList.splice(0,0,{id: 0,name:'全部教师',creatorId: 0});
	await getClassList();
	const data = {
		timeLimit: "0",
		searchType: 0,
		creatorId: 0,
    typeId: 0
	}
	const res = await api.GetCoursewareListByFilter(data);
	if(res.data.code === 200 && res.data.data){
		state.coursewareList = Utils.groupArray(res.data.data,4).concat(Utils.groupArray(res.data.data,4)).concat(Utils.groupArray(res.data.data,4)).concat(Utils.groupArray(res.data.data,4)).concat(Utils.groupArray(res.data.data,4)).concat(Utils.groupArray(res.data.data,4)).concat(Utils.groupArray(res.data.data,4));
	}

	state.teacherName = 0;
})


const state = reactive({
	dialogVisible: false,
	coursewareCode: "",
	coursewareStatus: '0',
	coursewareCreateTime: '0.25',
	option: [
          {
      value: '0',
      label: '全部时间'
    },
		{
			value: '0.25',
			label: '近一周'
		},
		{
			value: '-1',
			label: '近一天'
		},
    {
      value: '0.1',
      label: "近三天"
    },
	],
	coursewareList: [][4] as Array<Array<{
		id: number,
		class_id: number,
		share_id: number,
		title: string,
		class_name: string,
		start_time: string,
		paper_type: number
	}>>,
	classList: [] as Array<{id: number,name: string,creatorId: number}>,
	teacherName: 0,
  currentCoursewareType: 0,
  coursewareType: [
    {
      value: 3,
      label: '考试'
    },
    {
      value: 1,
      label: '练习'
    },
    {
      value: 0,
      label: '全部类型'
    },
  ]
});


const getClassList = async () => {
	const res = await api.GetClassList();
	if (res.data.code === 200) {
		state.classList = Array.from(new Map(
        res.data.data.map((item: { id: number , creatorName: string ,creatorId: number}) => {
          return [item.id,{
            id: item.id,
            name: item.creatorName,
            creatorId: item.creatorId
          }];
        })).values()
    );


    console.log(state.classList)
  }
};
const updateCoursewareList = async ()=> {

	let typeId = state.currentCoursewareType;
	const data = {
		timeLimit: state.coursewareCreateTime,
		typeId: typeId,
		creatorId: state.teacherName,
    searchType: 0,
	}
	const res = await api.GetCoursewareListByFilter(data);
	if(res.data.code === 200 && res.data.data){
		state.coursewareList = Utils.groupArray(res.data.data,4);
	}
}


const toCoursewareDetail = (id: number) => {
	const userAnswerStore = useDataStore();
	userAnswerStore.clearUser();
	window.open("https://cnlp.blcu.edu.cn/#/exercise?id=" + id + "&isPreview=true","_blank");
}

const loadMore = () => {

};

const showCoursewareDialog = () => {
	state.dialogVisible = true;
};	
const confirmCoursewareDialog = async () => {
	if(state.coursewareCode === ""){
		ElMessage({
			message: '作答码为空，请输入作答码',
			type: 'warning',
		});
	} else {
		const res = await api.getCoursewareIdByCwCode({coursewareCode: state.coursewareCode})
		if (res.data.code === 200) {
			state.dialogVisible = false;
			state.coursewareCode = "";
			toCoursewareDetail(res.data.data.id);
		}
	}
}

</script>

<style scoped lang="scss">
.bottom{
  padding: 0 4px;
  border-radius: 10px;
  .infinite-list{
    border-radius: 10px;
  }
}
.infinite-list-item{
	background-color: #fff;
	.item-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px;
		border-bottom:  1px solid #EDEDEF;
		.left-box{
			.title{
				margin-bottom: 4px;
				font-weight: bold;
			}
		}
		.right-box{
			color: #00B2FF;
		}
		.right-box.finished {
			color: #22DE9A;
		}
	}
}
.view_box {
	height: calc(100% - 60px);
	width: 600px;
  	margin: 0 auto;
	flex: 1;
	.type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 20px 5px;

		.left {
			display: flex;
			align-items: center;
			span {
				font-size: 16px;
				font-weight: 500;
				color: grey;
			}

			span:nth-child(1) {
				margin-right: 5px;
			}
		}
		.right {
			display: flex;
			align-items: center;
		}
	}

	.bottom {
		margin-bottom: 10px;
		height: 79vh;
		overflow-y: scroll;
		overflow-x: hidden;
		.el-row {
			height: 13vh;
			margin-bottom: 20px;
			.el-col {
				//background-color: skyblue;
				.stageQuizColor {
					border-top: 2px solid #67c23a;
				}
				.normal {
					border-top: 2px solid #0092ff;
				}
				:deep(.el-card) {
					font-size: 15px;
					position: relative;

					height: 13vh;

					.el-card__body {
						height: 74%;
					}
					.coursewareContent {
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.el-tag {
							position: absolute;
							top: 0;
							left: 0;
							border-radius: 0;
						}
						.contentBottom {
							font-size: 14px;
							color: #7c7c7c;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}
		}

		.el-row:last-child {
			margin-bottom: 0;
		}
	}



}

</style>